import React, { useEffect,useState  } from "react";
import { Outlet, NavLink, useNavigate } from "react-router-dom";
import {getList} from '../../api/index'
import mao from '../../../src/image/images/mao.jpg'
import wifi from '../../../src/image/images/wifi.jpg'
import { changedark, changeht } from '../../utils/bage_color'
import { DropdownMenu } from 'react-vant'
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import { Search } from '@react-vant/icons';
import { useTranslation } from 'react-i18next';
import i18n from '../../i18n/i18ns'
type Props = {};
const Index = (props: Props) => {
  const [icon, setIcon] = useState<Boolean>(true)
  const { t, i18n } = useTranslation();
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <a onClick={() => i18n.changeLanguage(i18n.language == 'en-US' ? 'zh-CN' : 'zh-CN')}>
          {t('icon.title')}
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a onClick={() => i18n.changeLanguage(i18n.language == 'zh-CN' ? 'en-US' : 'en-US')}>
          {t('icon.content')}
        </a>
      ),
    },

  ];
  useEffect(() => {
    getwid()
    changeht()
    console.log(i18n);
    
  }, []);
  const bage_Switch = () => {
    setIcon(!icon)
    if (icon) {
      changedark()

    } else {
      changeht()
    }
  }
  const [value, setValue] = useState<Record<string, string | number>>({})
  const getData = () => {
    getList().then((res: any) => {
      console.log("====================================");
      console.log(res);
      console.log("====================================");
    });
  };
  const fun=()=>{
   window.onresize=()=>{
    console.log( document.documentElement.clientWidth);
    getwid()
   }
  }
  const getwid = () => {
    if (document.documentElement.clientWidth < 750) {
      //移动
     
      document.documentElement.className='class_h5'

       console.log(document.documentElement.className);
     }else{
      //pc
      document.documentElement.className='class_pc'
      console.log(document.documentElement.className);
     }
  }
  fun()
  const option1 = [
    { text: <NavLink to="/home/Articles">{t('0')}</NavLink>, value: 0 },
    { text: <NavLink to="/home/Archives">{t('1')}</NavLink>, value: 1 },
    { text: <NavLink to="/home/KnowledgeBooks">{t('2')}</NavLink>, value: 2 },
    { text: 1, value: 3 },
    { text: 2, value: 4 },
    { text: 3, value: 5 },
  ]

  const navigate = useNavigate()
  const goser = () => {
    navigate('/serch')
  }


  return (
    <div className="indexbox">
      {/* pc端头部 */}
      <div className="top">
        <div className="topbox">
          <div className="topleft">
            <span>
              <NavLink to="/home/Articles">{t('0')}</NavLink>
            </span>
            <span>
              <NavLink to="/home/Archives">{t('1')}</NavLink>
            </span>
            <span>
              <NavLink to="/home/KnowledgeBooks">{t('2')}</NavLink>
            </span>
          </div>
          <div className="topright">
            <span><Search onClick={() => { goser() }} /></span>
            <span className='theme' onClick={bage_Switch}>
              {
                icon ? <span>  <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26264" width="35" height="35"><path d="M501.48 493.55m-233.03 0a233.03 233.03 0 1 0 466.06 0 233.03 233.03 0 1 0-466.06 0Z" fill="#F9C626" p-id="26265"></path><path d="M501.52 185.35H478.9c-8.28 0-15-6.72-15-15V87.59c0-8.28 6.72-15 15-15h22.62c8.28 0 15 6.72 15 15v82.76c0 8.28-6.72 15-15 15zM281.37 262.76l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.86-5.86-15.36 0-21.21l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.35 0 21.21zM185.76 478.48v22.62c0 8.28-6.72 15-15 15H88c-8.28 0-15-6.72-15-15v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15zM270.69 698.63l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.36 5.86-21.21 0l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.85-5.86 15.35-5.86 21.21 0zM486.41 794.24h22.62c8.28 0 15 6.72 15 15V892c0 8.28-6.72 15-15 15h-22.62c-8.28 0-15-6.72-15-15v-82.76c0-8.28 6.72-15 15-15zM706.56 709.31l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.36 0 21.21l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.85-5.86-15.35 0-21.21zM802.17 493.59v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15v22.62c0 8.28-6.72 15-15 15h-82.76c-8.28 0-15-6.72-15-15zM717.24 273.44l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.86-5.86 15.36-5.86 21.21 0l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.35 5.86-21.21 0z" fill="#F9C626" p-id="26266"></path></svg></span> :
                  <span><svg className='theme' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1491" width="32" height="32"><path d="M551.41 326.72h-74.14c-10.24 0-18.56-8.3-18.56-18.54 0-10.24 8.31-18.54 18.56-18.54h74.14c10.24 0 18.56 8.3 18.56 18.54 0 10.24-8.32 18.54-18.56 18.54z" fill="#e684af" p-id="1492"></path><path d="M773.93 697.54c-245.78 0-445.01-199.23-445.01-445 0-55.23 10.08-108.13 28.48-156.94C189.08 159.05 69.34 321.61 69.34 512.14c0 245.76 199.23 445 445.01 445 190.51 0 353.07-119.74 416.51-288.07-48.8 18.4-101.7 28.47-156.93 28.47z" fill="#e684af" p-id="1493"></path><path d="M551.41 920.05c-245.75 0-444.98-199.23-444.98-445 0-113.41 42.44-216.91 112.26-295.48-91.61 81.5-149.35 200.28-149.35 332.57 0 245.76 199.23 445 445.01 445 132.26 0 251.05-57.74 332.55-149.37-78.57 69.85-182.08 112.28-295.49 112.28z" fill="#e684af" p-id="1494"></path><path d="M736.84 308.17c0 10.24-8.31 18.54-18.55 18.54-10.22 0-18.53-8.3-18.53-18.54 0-10.24 8.32-18.54 18.53-18.54 10.24 0 18.55 8.3 18.55 18.54z" fill="#e684af" p-id="1495"></path><path d="M644.14 493.59c0 10.23-8.31 18.54-18.56 18.54-10.24 0-18.53-8.32-18.53-18.54 0-10.24 8.29-18.54 18.53-18.54 10.25 0 18.56 8.3 18.56 18.54z" fill="#e684af" p-id="1496"></path><path d="M959.33 270.79c0 10.24-8.31 18.54-18.53 18.54-10.24 0-18.56-8.3-18.56-18.54 0-10.24 8.31-18.54 18.56-18.54 10.22 0 18.53 8.29 18.53 18.54z" fill="#e684af" p-id="1497"></path><path d="M625.58 85.37c0 10.24-8.29 18.54-18.53 18.54-10.24 0-18.56-8.3-18.56-18.54 0-10.23 8.31-18.53 18.56-18.53 10.25 0 18.53 8.3 18.53 18.53z" fill="#e684af" p-id="1498"></path><path d="M514.35 234c-10.24 0-18.56 8.31-18.56 18.54V363.8c0 10.23 8.31 18.53 18.56 18.53 10.22 0 18.53-8.3 18.53-18.53V252.54c0-10.23-8.31-18.54-18.53-18.54z" fill="#e684af" p-id="1499"></path><path d="M829.55 437.96c-10.24 0-18.53 8.3-18.53 18.54v111.24c0 10.24 8.29 18.54 18.53 18.54 10.24 0 18.53-8.3 18.53-18.54V456.51c-0.01-10.25-8.29-18.55-18.53-18.55z" fill="#e684af" p-id="1500"></path><path d="M866.63 530.67h-74.17c-10.24 0-18.53-8.3-18.53-18.53 0-10.24 8.29-18.54 18.53-18.54h74.17c10.24 0 18.53 8.3 18.53 18.54 0 10.22-8.28 18.53-18.53 18.53z" fill="#e684af" p-id="1501"></path></svg></span>
              }
            </span>
            <span>
              <Dropdown menu={{ items }} >
                <a onClick={(e) => e.preventDefault()}>
                  <Space >
                    <svg onClick={() => { console.log(444) }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23536" width="27" height="27"><path d="M512 64.050782c60.495816 0 119.153774 11.836583 174.345794 35.181267 53.335742 22.558785 101.245915 54.864562 142.401244 96.01989s73.461105 89.066525 96.01989 142.401244c23.344684 55.19202 35.181267 113.851001 35.181267 174.345794 0 60.494793-11.836583 119.153774-35.181267 174.345793-22.558785 53.334719-54.864562 101.245915-96.01989 142.401244s-89.066525 73.461105-142.401244 96.019891c-55.19202 23.344684-113.851001 35.181267-174.345794 35.181267s-119.153774-11.836583-174.345794-35.181267c-53.335742-22.558785-101.245915-54.864562-142.401244-96.019891S121.791857 739.679489 99.233072 686.34477c-23.344684-55.19202-35.181267-113.851001-35.181267-174.345793 0-60.495816 11.836583-119.153774 35.181267-174.345794 22.558785-53.335742 54.864562-101.245915 96.01989-142.401244s89.066525-73.461105 142.401244-96.01989c55.19202-23.344684 113.849978-35.181267 174.345794-35.181267m0-51.16531c-275.653107 0-499.114528 223.461421-499.114528 499.114528S236.346893 1011.114528 512 1011.114528s499.114528-223.461421 499.114528-499.114528S787.653107 12.885472 512 12.885472z" fill="" p-id="23537"></path><path d="M464.355887 563.062979l38.774095 9.793041c-8.128121 31.847336-22.75219 56.131415-43.87016 72.850191-21.120017 16.72287-46.935985 25.083282-77.447906 25.083282-31.578206 0-57.261145-6.426363-77.046771-19.287276-19.786649-12.856819-34.845623-31.478945-45.169759-55.862285-10.327206-24.38334-15.489786-50.565652-15.489786-78.546937 0-30.509874 5.826705-57.127092 17.488303-79.845513 11.657504-22.715351 28.246321-39.972387 49.766451-51.764967 21.517059-11.791557 45.200458-17.687848 71.051219-17.687848 29.312606 0 53.963029 7.463995 73.950246 22.384823 19.986193 14.923898 33.909297 35.909861 41.771359 62.956868l-38.174438 8.993838c-6.795776-21.316491-16.656355-36.840046-29.579689-46.568619-12.925381-9.724479-29.1806-14.5903-48.76668-14.5903-22.518876 0-41.339524 5.395894-56.461943 16.188705-15.123442 10.79281-25.7515 25.282826-31.878035 43.470047-6.130627 18.187221-9.193383 36.944424-9.193383 56.261375 0 24.917506 3.628644 46.667879 10.893095 65.256236 7.260357 18.587334 18.552541 32.477692 33.876552 41.672098 15.321964 9.193383 31.91078 13.791098 49.76645 13.791098 21.717627 0 40.104393-6.261611 55.162344-18.786879 15.054881-12.521175 25.248034-31.108508 30.578436-55.760978zM550.497802 665.793712V372.792495h39.772843l153.896042 230.04435V372.792495h37.174668v293.001217h-39.772842l-153.896043-230.243895v230.243895h-37.174668z" fill="" p-id="23538"></path></svg>
                  </Space>
                </a>
              </Dropdown>
            </span>
          </div>
        </div>
      </div>
      {/* 移动端 头部*/}
      <div className="tops">
        <DropdownMenu value={value} onChange={v => setValue(v)}>
          <DropdownMenu.Item name='value1' options={option1} />
        </DropdownMenu>
      </div>
      <div className="main">
        <div className="mainbox">
          <Outlet></Outlet>
        </div>
        <div className="bottom">
        <div className="bottomicon">
            <img src={wifi} alt="" onClick={()=>{
              navigate('/login')
            }} />
           <a target='_blank' href="https://github.com/fantasticit/wipi"> <img src={mao} alt="" /></a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;
